import React, { useEffect, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { useHistory } from "react-router-dom";
import Header from "../header/detail-header";
import logo from "../../assets/logo.png";

import "./style.scss";
export default function Login() {
    const [statusShow, setStatusShow] = useState(1);
    const [tel, setTel] = useState("");
    const [code, setCode] = useState("");
    const history = useHistory();
    const showInfo = useSelector((state) => state.getIn(["login", "showInfo"]));
    const status = useSelector((state) => state.getIn(["login", "status"]));
    const loginStatus = useSelector((state) =>
        state.getIn(["login", "loginStatus"])
    );
    console.log(loginStatus);
    const dispatch = useDispatch();

    const handelSend = () => {
        if (status === 0 || status === 3) {
            // 验证手机号码格式是否正确
            dispatch({ type: "login/send_code", tel });
        }
    };
    // const loginRef = useRef({
    //     status:null,
    //     loginStatus:null
    // });
    const change = (ev) => {
        setTel(ev.target.value);
    };
    const sendCode = (ev) => {
        setCode(ev.target.value);
    };

    const changePhone = () => {
        setStatusShow(2);
    };
    const changeEmail = () => {
        setStatusShow(3);
    };
    const loginAction = () => {
        console.log(111);
        if (loginStatus === 1) {
            return;
            // 正在登陆中
        }
        if (showInfo === "获取验证码") {
            alert("请发送验证码");
        } else {
            console.log(222);
            dispatch({ type: "login/check_code", tel, code });
        }
    };
    useEffect(() => {
        if (status === 3) {
            // 提醒用户发送失败
            alert("发送失败，请重试");
        }
        switch (loginStatus) {
            case 2:
                history.goBack();
                break;
            case 3:
                alert("验证失败,请重新发送");
                break;
            default:
                break;
        }
    }, [status, loginStatus]);
    return (
        <div className="page" id="Login">
            <Header />
            <div className="content">
                <div className="img">
                    <img src={logo} alt="" />
                </div>
                {statusShow == 1 ? (
                    <div className="login-method">
                        <p onClick={changePhone}>手机号快捷登录</p>
                        <p onClick={changeEmail}>邮箱帐号登录</p>
                    </div>
                ) : statusShow == 2 ? (
                    <div className="phoneEmail">
                        <p>
                            <input
                                className="code"
                                value={tel}
                                onChange={change}
                                type="text"
                                placeholder="请输入手机号"
                            />
                        </p>
                        <p>
                            <input
                                type="text"
                                value={code}
                                onChange={sendCode}
                                type="text"
                                placeholder="请输入手机验证码"
                            />
                            <button className="send" onClick={handelSend}>
                                {showInfo}
                            </button>
                        </p>
                        <p
                            className={`sendLogin ${
                                loginStatus === 1 ? "disabled" : ""
                            }`}
                            onClick={loginAction}
                        >
                            登录
                        </p>
                    </div>
                ) : (
                    <div className="phoneEmail">邮箱注册</div>
                )}
            </div>
        </div>
    );
}
